<template>
  <div class="home">
    <el-tabs
      v-model="activeName"
      type="border-card"
      @tab-click="handleClick"
      style="border: none"
    >
      <el-tab-pane label="轮播图展示" name="first" style="border: none">
        <template>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column label="序号" width="120">
              <template slot-scope="scope">
                <span style="margin-left: 10px" class="indexaa"
                  >0{{ scope.$index + 1 }}</span
                >
              </template>
            </el-table-column>
            <el-table-column label="轮播图标题" width="120">
              <template slot-scope="scope">
                <span>{{ scope.row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="120">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  scope.row.status == 0 ? "启用" : "未启用"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="类型" width="120">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  scope.row.type == 0 ? "关于我们" : "其他"
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="图片" width="120">
              <template slot-scope="scope">
                <img
                  :src="scope.row.pictureId"
                  alt=""
                  style="width: 60px; height: 60px"
                />
              </template>
              <!-- <img src="" alt=""> -->
            </el-table-column>
            <el-table-column label="开始时间" width="120">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  new Date(scope.row.createTime).getFullYear() +
                  "-" +
                  new Date(scope.row.createTime).getMonth() +
                  1 +
                  "-" +
                  "0" +
                  new Date(scope.row.createTime).getDate()
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="结束时间" width="120">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{
                  new Date(scope.row.updateTime).getFullYear() +
                  "-" +
                  new Date(scope.row.updateTime).getMonth() +
                  1 +
                  "-" +
                  "0" +
                  new Date(scope.row.updateTime).getDate()
                }}</span>
              </template>
            </el-table-column>
            <el-table-column label="排序" width="120">
              <template>
                <span>是</span>
              </template>
            </el-table-column>
            <el-table-column label="轮播图介绍" width="300">
              <template slot-scope="scope">
                <span>{{ scope.row.createBy }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建人" width="120">
              <template> 创建人 </template>
            </el-table-column>
            <el-table-column label="更新人" width="120">
              <template> 更新人 </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEditzhid(scope.$index, scope.row)"
                  >置顶</el-button
                >
                <el-button
                  size="mini"
                  type="success"
                  @click="handleEdit(scope.$index, scope.row.id)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="totalNum"
            @current-change="getcurr"
            @next-click="getnext"
            @prev-click="getprev"
          >
          </el-pagination>
        </template>
      </el-tab-pane>
      <el-dialog title="轮播图更改" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="轮播图标题" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="轮播图介绍" :label-width="formLabelWidth">
            <el-input v-model="form.content" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="queren">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 配置管理 -->
      <el-tab-pane label="配置管理" name="second">
        <div class="bannerbox">
          <div class="bannerName">
            <div>轮播图标题</div>
            <el-input v-model="input1" placeholder="新闻标题"></el-input>
          </div>
          <div class="state">
            <div>状态</div>
            <el-radio-group v-model="form.resource">
              <el-radio label="启动"></el-radio>
              <el-radio label="禁用"></el-radio>
            </el-radio-group>
          </div>

          <div>
            <div>排序</div>
            <el-input v-model="input2" placeholder="请输入序号"></el-input>
          </div>
        </div>
        <div class="bannerbox">
          <div>
            <div>轮播图介绍</div>
            <el-input v-model="input3" placeholder="请输入序号"></el-input>
          </div>
          <div>
            <div>轮播图上传</div>
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div>
            <div>开启时间————结束时间</div>
          </div>
          <div>
            <div>类型</div>
            <el-input v-model="input4" placeholder="请选择类型"></el-input>
          </div>
        </div>
        <div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="enterss">确定</el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
  
  <script>
// import { getbannerdata } from "../request/api/getpagehb";
import { getbannerdata } from "../../request/api/getbanner";
import { delbanner } from "../../request/api/delbanner";
import { edithbanner } from "../../request/api/editbanner";
import { addhuoban } from "../../request/api/addhuoban";
export default {
  data() {
    return {
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      huoban_name: "",
      huoban_content: "",
      value: "", //选择时间
      radio: "1", //单选框
      imageUrl: "", //图片地址
      activeName: "first", //默认加载first内容
      // 上传图片的id
      imgId: 0,
      totalNum: 0,
      tableData: [],
      options: [
        {
          value: "1",
          label: "1",
        },
        {
          value: "2",
          label: "2",
        },
        {
          value: "3",
          label: "3",
        },
        {
          value: "4",
          label: "4",
        },
        {
          value: "5",
          label: "5",
        },
      ],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
        content: "",
      },
      formLabelWidth: "120px",
      editid: 0,
      pagesNum: 1,
    };
  },

  methods: {
    async handleEditzhid(e, ind) {
      console.log("1111", e, ind);
      let resres = this.tableData.splice(e, 1)[0];
      this.tableData.unshift(ind);
    },

    async enterss() {
      let res = await addhuoban("/admin/slideshow/addSlideShow", {
        id: 0,
        orderId: 0,
        pictureId: 0,
        status: 0,
        title: this.input1,
        type: 0,
      });
      if (res.data.code == 200) {
        this.$message({
          type: "success",
          message: "数据提交成功",
        });
      } else {
        this.$message({
          type: "error",
          message: "该伙伴已存在,请重新添加",
        });
      }
      console.log("resres");
    },
    handleDelete(ind, ids) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await delbanner(`/admin/slideshow/deleteSlideShow/${ids}`);
          console.log("删除", res);

          // if (this.totalNum % 10 != 0) {
          //   console.log("dsadsad");
          //   this.getbaners(this.pagesNum - 1, 10);
          // } else {
          let restotal = this.totalNum - 1;
          if (restotal % 10 == 0) {
            console.log("dsadsaasdadsjkhdjkj");
            this.getbaners(this.pagesNum - 1, 10);
          } else {
            this.getbaners(this.pagesNum, 10);
            // console.log("页面", this.totalNum);
          }
          // }
          // if (this.tableData.length < 1) {
          // this.getbaners(this.pagesNum - 1, 10);
          // } else {
          // }
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    async getaaa() {
      // let res=await
    },
    // async handleDelete(ind, ids) {
    //   let res = await delbanner(`/admin/partner/${ids}`);
    //   console.log("删除", res);
    //   this.getbaners(1, 10);
    // },
    async handleEdit(ind, ids) {
      this.dialogFormVisible = true;
      this.editid = ids;
      console.log("reresidid", ids);
    },
    async queren() {
      this.dialogFormVisible = false;
      let res = await edithbanner("/admin/slideshow/updateSlideShow", {
        createBy: this.form.content,
        createTime: "2024-11-19",
        id: this.editid,
        isDelete: 1,
        orderId: 0,
        pictureId: 2,
        status: 0,
        title: this.form.name,
        type: 0,
        updateBy: "FSDAFDSA",
        updateTime: "2024-11-19",

        // createBy: this.huoban_content,
        // createTime: new Date().toString(),111
        // id: this.editid,
        // isDelete: 0,
        // orderId: 0,
        // pictureId: 123,
        // status: 1,
        // title: this.name,
        // type: 0,
        // updateBy: "",
        // updateTime: (new Date() - 1000).toString(),
      });
      console.log("resresAAAA", res);
      if (res.data.code == 200) {
        this.$message({
          type: "success",
          message: "数据修改成功",
        });
      } else {
        this.$message({
          type: "error",
          message: "aa",
        });
      }
      this.getbaners(this.pagesNum, 10);
    },
    getnext(e) {
      console.log("res", e);
      this.pagesNum = e;
      this.getbaners(e, 10);
    },
    getcurr(e) {
      this.getbaners(e, 10);
    },
    getprev(e) {
      this.getbaners(e, 10);
    },
    async getbaners(page, pageSize) {
      let ress = await getbannerdata(
        `/admin/slideshow/page?pageNum=${page}&pageSize=${pageSize}`
      );
      console.log(111);
      console.log(ress);
      this.tableData = ress.data.rows;
      this.totalNum = ress.data.total;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleAvatarSuccess(res, file) {
      console.log("resres", res.data[0].id);
      this.imgId = res.data[0].id;
      if (this.imgId) {
        this.$message({
          type: "success",
          message: "图片提交成功",
        });
      }

      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  created() {
    this.getbaners(this.pagesNum, 4);
  },
};
</script>
  
  <style lang="scss" scoped>
.bannerbox {
  display: flex;
  div {
    margin-left: 100px;
  }
}
.bannerName {
  width: 200px;
}
.el-pagination {
  text-align: right;
}
.tit {
  text-align: left;
  margin-left: 7px;
  margin-bottom: 10px;
  height: 31px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  border: 1px dashed #ccc;
  background-color: #f6f8fb;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.indexaa {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #eff1f8;
  display: inline-block;
  text-align: center;
  line-height: 40px;
}

:deep .el-tabs--border-card > .el-tabs__header {
  background-color: #fff;
  border-bottom: none;
}

:deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}

:deep .el-tabs--card > .el-tabs__header {
  border: none;
}

:deep .el-tabs--card > .el-tabs__header .el-tabs__item {
  border: none !important;
}

:deep .el-tabs--border-card > .el-tabs__header .el-tabs__item:first-child {
  margin-right: 20px;
}

:deep .el-tabs--border-card > .el-tabs__header .el-tabs__item {
  border: none;
}

:deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  background-color: #2567ff;
  color: #fff;
}

:deep
  .el-tabs--border-card
  > .el-tabs__header
  .el-tabs__item:not(.is-disabled):hover {
  color: #000;
}
:deep .el-input__prefix {
  display: none;
}
:deep .el-input--suffix .el-input__inner {
  background-color: #f6f8fb;
}

:deep .el-tabs__content {
  border-bottom: 2px solid #e8eaed;
  line-height: 100px;
}
:deep .inp input {
  height: 200px;
}
:deep .inp input::placeholder {
  transform: translateY(-80px);
}
:deep .el-main[data-v-7eb2bc79] {
  line-height: 0px !important;
}
:deep input[aria-hidden="true"] {
  display: none !important;
}
</style>